<template>
  <div class="login-all">
    <div class="login">
    <!-- 登录 -->
    <el-form ref="ruleFormRefLogin" :model="ruleFormLogin" status-icon :rules="rulesLogin" label-width="120px"
      class="demo-ruleForm" label-position="top">
      <el-form-item>
        <h1>登录</h1>
      </el-form-item>
      <el-form-item label="账户" prop="nickname">
        <el-input v-model="ruleFormLogin.nickname" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="ruleFormLogin.pass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRefLogin)" class="demo-button">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import {  login } from '@/api/user.ts'
import {useRouter} from 'vue-router'
import useGlobalStore from '../../store/modules/global';


const globalStore = useGlobalStore()
const router = useRouter()
//登录
const ruleFormRefLogin = ref<FormInstance>()
const ruleFormLogin = reactive({
  pass: '',
  nickname: '',
})
//验证密码
const validatePassLogin = (rule: any, value: any, callback: any) => {
  console.log('rule: ', rule);
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
//验证账号 @ts-ignore
const validateUsernameLogin = (rule: any, value: any, callback: any) => {
  console.log('rule: ', rule);
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}
const rulesLogin = reactive<FormRules<typeof ruleFormLogin>>({
  pass: [{ validator: validatePassLogin, trigger: 'blur' }],
  nickname: [{ validator: validateUsernameLogin, trigger: 'blur' }],
})




const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:any) => {
    if (valid) {//登录
      login({
        nickname: ruleFormLogin.nickname,
        password: ruleFormLogin.pass,
        role: 1
      }).then((res:any) => {
        if (res.code == 1) {
          //ElMessage({
          //  message: '登录成功',
          //  type: 'success',
          //})
          router.push('/')
          localStorage.setItem('user',JSON.stringify(res.data))
          globalStore.setUserInfo(res.data)
          globalStore.setToken(generateRandomToken(20))
        }
      }).catch((err:any) => {
        ElMessage({
           message: '账号或密码不正确',
           type: 'warning',
          })
        console.log(err)
      })
    } else {
      console.log('验证失败')
      return false
    }
  })
}

function generateRandomToken(length:Number) {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    //@ts-ignore
    for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}

</script>

<style lang="less" scoped>
.login-all{
  width:100%;
  height:100vh;
  background-image:url('@/assets/login-bg1.jpeg');
  background-size:cover;
}
.login {
  width: 400px;
  height: 500px;
  background-color: skyblue;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.el-form {
  height: 100%;
  padding: 20px;
}

.el-form-item {
  height: 50px;
}

.el-form-item:nth-child(1) {
  margin: 20px 0;
}

.el-form-item:nth-child(1) h1 {
  width: 100%;
  text-align: center;
}

.demo-button {
  margin-top: 15px;
  width: 100%;
}

.check-button {
  width: 100%;
}
</style>
